<template>
  <div class="settings-view-container">
    <div class="settings-view-content">
      <h1 class="view-title">设置</h1>

      <section class="settings-section">
        <h2 class="section-title">外观</h2>
        <div class="setting-item">
          <label for="theme-select" class="setting-label">主题:</label>
          <select id="theme-select" v-model="localSettings.theme" class="setting-select">
            <option value="dark">深色</option>
            <option value="light">浅色</option>
            <option value="system">跟随系统</option>
          </select>
        </div>
      </section>

      <section class="settings-section">
        <h2 class="section-title">启动行为</h2>
        <div class="setting-item">
          <input type="checkbox" id="launch-on-startup-checkbox" v-model="localSettings.launchOnStartup" class="setting-checkbox">
          <label for="launch-on-startup-checkbox" class="setting-label-inline">开机时自动启动应用程序</label>
        </div>
      </section>

      <section class="settings-section">
        <h2 class="section-title">关闭行为</h2>
        <div class="setting-item">
          <input type="checkbox" id="show-close-dialog-checkbox" v-model="localSettings.showCloseDialog" class="setting-checkbox">
          <label for="show-close-dialog-checkbox" class="setting-label-inline">关闭主窗口时显示确认对话框</label>
        </div>

        <div v-if="!localSettings.showCloseDialog" class="setting-item conditional-setting">
          <p class="setting-label">如果未显示对话框，则默认关闭操作为:</p>
          <div class="radio-group">
            <div class="radio-option">
              <input type="radio" id="close-action-tray" value="tray" v-model="localSettings.closeDialogDefaultAction" class="setting-radio">
              <label for="close-action-tray" class="setting-label-inline">最小化到系统托盘</label>
            </div>
            <div class="radio-option">
              <input type="radio" id="close-action-quit" value="close" v-model="localSettings.closeDialogDefaultAction" class="setting-radio">
              <label for="close-action-quit" class="setting-label-inline">直接退出应用</label>
            </div>
          </div>
        </div>
      </section>

      <section class="settings-section">
        <h2 class="section-title">数据存储</h2>
        <div class="setting-item">
          <label class="setting-label">配置文件路径:</label>
          <div class="path-container">
            <div class="data-path-display-container">
              <span v-if="storePath" class="data-path-text">{{ storePath }}</span>
              <span v-else class="data-path-text italic-placeholder">正在获取...</span>
            </div>
            <button @click="openStoreLocation" class="btn btn-icon" :disabled="!storePath" title="打开配置文件夹">
              <span class="button-icon">&#xE8DA;</span>
            </button>
          </div>
        </div>
        <div class="setting-item">
          <label class="setting-label">SQLite数据库:</label>
          <div class="path-container">
            <div class="data-path-display-container">
              <span v-if="tempSqlitePath || sqliteDbPath" class="data-path-text">{{ tempSqlitePath || sqliteDbPath }}</span>
              <span v-else class="data-path-text italic-placeholder">正在获取...</span>
            </div>
            <button @click="openSqliteDbLocation" class="btn btn-icon" :disabled="!sqliteDbPath" title="打开数据库文件夹">
              <span class="button-icon">&#xE8DA;</span>
            </button>
            <button @click="changeSqlitePath" class="btn btn-icon" title="修改SQLite数据库位置">
              <span class="button-icon">&#xE713;</span>
            </button>
          </div>
        </div>
        <p v-if="restartRequiredMessage" class="restart-message">{{ restartRequiredMessage }}</p>
      </section>
      
      <!-- 新增捐赠支持部分 -->
      <section class="settings-section donation-section">
        <h2 class="section-title">捐赠支持</h2>
        <div class="donation-container">
          <div class="qrcode-container">
            <div class="qrcode-item">
              <img src="@/assets/wx.jpg" alt="微信支付" class="qrcode-image" />
              <p class="qrcode-label">微信支付</p>
            </div>
            <div class="qrcode-item">
              <img src="@/assets/xfb.jpg" alt="支付宝" class="qrcode-image" />
              <p class="qrcode-label">支付宝</p>
            </div>
          </div>
          <p class="donation-thanks">感谢您的支持！(*^▽^*)</p>
        </div>
      </section>

      <section class="settings-section about-section">
        <h2 class="section-title">关于</h2>
        <div class="about-container">
          <div class="app-info">
            待办待阅 · 版本 0.2.0 · 作者 ML · 联系方式: ml_6666ml@163.com · Git: <a href="#" @click.prevent="openGitRepo" class="git-link">https://gitee.com/ml_6666/check-vibe.git</a>
          </div>
        </div>
      </section>

    </div>

    <div class="settings-actions-footer">
      <button @click="applySettings" class="btn btn-primary">应用设置</button>
    </div>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'SettingsView',
  data() {
    return {
      localSettings: {
        theme: 'dark', // Default, will be overwritten by Vuex state on created
        showCloseDialog: true,
        closeDialogDefaultAction: 'tray',
        launchOnStartup: false,
        // Add any other settings managed here
      },
      storePath: null, // Added to store the data file path
      sqliteDbPath: null, // Added to store the SQLite database path
      tempSqlitePath: null, // 临时存储用户选择的SQLite路径，应用前不会写入配置
      restartRequiredMessage: null, // For prompting user to restart
      // To track if settings have changed for dirty check / unsaved changes warning
      // initialSettingsSnapshot: null,
    };
  },
  computed: {
    ...mapState({
      // We still need these to initialize and reset localSettings
      vuexAppSettings: state => state.settings,
    }),
    // Removed computed properties that were directly v-modeled
    // Settings are now managed via localSettings data property
  },
  methods: {
    ...mapActions(['updateSettings']), // Still need this for applying changes

    // 打开Git仓库
    openGitRepo() {
      if (window.electronAPI && window.electronAPI.openExternalLink) {
        window.electronAPI.openExternalLink('https://gitee.com/ml_6666/check-vibe.git');
        console.log('[SettingsView] 请求打开Git仓库链接');
      } else {
        // 降级处理，如果electronAPI不可用，尝试使用window.open
        window.open('https://gitee.com/ml_6666/check-vibe.git', '_blank');
        console.warn('[SettingsView] electronAPI.openExternalLink不可用，使用window.open作为降级方案');
      }
    },

    // 从主进程直接加载配置
    async loadConfigFromMainProcess() {
      try {
        // 1. 直接从主进程获取配置文件内容
        if (window.electronAPI && window.electronAPI.invoke) {
          console.log('[SettingsView] 正在从主进程获取配置...');
          const data = await window.electronAPI.invoke('load-app-data');
          
          if (data && data.settings) {
            console.log('[SettingsView] 从主进程获取到配置:', JSON.stringify(data.settings));
            
            // 2. 使用主进程返回的配置
            this.localSettings = { ...data.settings };
            
            // 3. 确保所有必需字段都有默认值
            if (!this.localSettings.theme) this.localSettings.theme = 'dark';
            if (typeof this.localSettings.miniMode !== 'boolean') this.localSettings.miniMode = false;
            if (typeof this.localSettings.alwaysOnTop !== 'boolean') this.localSettings.alwaysOnTop = false;
            if (typeof this.localSettings.showCloseDialog !== 'boolean') this.localSettings.showCloseDialog = true;
            if (!this.localSettings.closeDialogDefaultAction) this.localSettings.closeDialogDefaultAction = 'tray';
            if (typeof this.localSettings.launchOnStartup !== 'boolean') this.localSettings.launchOnStartup = false;

            // 4. SQLite路径特殊处理
            if (data.settings.sqlitePath) {
              console.log('[SettingsView] 配置中包含SQLite路径:', data.settings.sqlitePath);
              this.localSettings.sqlitePath = data.settings.sqlitePath;
            }

            console.log('[SettingsView] 完成配置初始化:', JSON.stringify(this.localSettings));
          } else {
            console.warn('[SettingsView] 主进程未返回配置数据，使用默认值');
            this.initializeLocalSettings();
          }
        } else {
          console.warn('[SettingsView] electronAPI不可用，使用默认值');
          this.initializeLocalSettings();
        }
      } catch (error) {
        console.error('[SettingsView] 从主进程获取配置出错:', error);
        this.initializeLocalSettings();
      }
    },

    initializeLocalSettings() {
      console.log('[SettingsView] initializeLocalSettings 开始初始化, vuexAppSettings:', this.vuexAppSettings);
      
      // 如果vuexAppSettings不存在，创建默认设置
      if (!this.vuexAppSettings) {
        console.warn('[SettingsView] vuexAppSettings不存在，使用默认设置');
        this.localSettings = {
          theme: 'dark',
          miniMode: false,
          alwaysOnTop: false,
          showCloseDialog: true,
          closeDialogDefaultAction: 'tray',
          launchOnStartup: false,
          sqlitePath: null
        };
      } else {
        // Deep copy Vuex settings to avoid direct mutation
        console.log('[SettingsView] 从Vuex复制设置到localSettings');
        this.localSettings = JSON.parse(JSON.stringify(this.vuexAppSettings));
        
        // 确保所有必要的设置字段都存在
        if (!this.localSettings.hasOwnProperty('theme')) this.localSettings.theme = 'dark';
        if (!this.localSettings.hasOwnProperty('miniMode')) this.localSettings.miniMode = false;
        if (!this.localSettings.hasOwnProperty('alwaysOnTop')) this.localSettings.alwaysOnTop = false;
        if (!this.localSettings.hasOwnProperty('showCloseDialog')) this.localSettings.showCloseDialog = true;
        if (!this.localSettings.hasOwnProperty('closeDialogDefaultAction')) this.localSettings.closeDialogDefaultAction = 'tray';
        if (!this.localSettings.hasOwnProperty('launchOnStartup')) this.localSettings.launchOnStartup = false;
        if (!this.localSettings.hasOwnProperty('sqlitePath')) this.localSettings.sqlitePath = null;
      }
      
      console.log('[SettingsView] 初始化后的localSettings:', JSON.parse(JSON.stringify(this.localSettings)));
      
      // 检查localStorage是否有上次保存的SQLite路径
      const lastSqlitePath = localStorage.getItem('lastSqlitePath');
      if (lastSqlitePath) {
        console.log('[SettingsView] 从localStorage恢复上次保存的SQLite路径:', lastSqlitePath);
        this.tempSqlitePath = lastSqlitePath;
        this.localSettings.sqlitePath = lastSqlitePath;
      }
    },

    async fetchStorePath() {
      if (window.electronAPI && window.electronAPI.getStorePath) {
        try {
          const path = await window.electronAPI.getStorePath();
          this.storePath = path;
          console.log('[SettingsView] Store path fetched:', path);
        } catch (error) {
          console.error('[SettingsView] Error fetching store path:', error);
          this.storePath = '获取路径失败';
        }
      } else {
        console.warn('[SettingsView] electronAPI.getStorePath not available.');
        this.storePath = '无法调用API获取路径';
      }
    },

    async fetchSqliteDbPath() {
      if (window.electronAPI && window.electronAPI.getSqliteDbPath) {
        try {
          const path = await window.electronAPI.getSqliteDbPath();
          this.sqliteDbPath = path;
          console.log('[SettingsView] SQLite database path fetched:', path);
        } catch (error) {
          console.error('[SettingsView] Error fetching SQLite database path:', error);
          this.sqliteDbPath = '获取路径失败';
        }
      } else {
        console.warn('[SettingsView] electronAPI.getSqliteDbPath not available.');
        this.sqliteDbPath = '无法调用API获取路径';
      }
    },

    openStoreLocation() {
      if (this.storePath && window.electronAPI && window.electronAPI.openStoreFolder) {
        try {
          window.electronAPI.openStoreFolder(); // Simply call the function
          console.log('[SettingsView] Request to open store folder sent.');
          // No result to check here, main process handles opening or logs its own errors.
        } catch (error) {
          // This catch block might still be useful if the API call itself synchronously fails (e.g., if electronAPI or openStoreFolder is undefined at call time due to a bug)
          console.error('[SettingsView] Error directly calling openStoreFolder API:', error);
          alert('调用打开文件夹功能时出错: ' + error.message);
        }
      } else {
        console.warn('[SettingsView] Store path not available or API openStoreFolder not available.');
        alert('数据路径无效或无法调用API打开文件夹。');
      }
    },

    openSqliteDbLocation() {
      if (this.sqliteDbPath && window.electronAPI && window.electronAPI.openSqliteDbFolder) {
        try {
          window.electronAPI.openSqliteDbFolder(); // Simply call the function
          console.log('[SettingsView] Request to open SQLite database folder sent.');
          // No result to check here, main process handles opening or logs its own errors.
        } catch (error) {
          // This catch block might still be useful if the API call itself synchronously fails (e.g., if electronAPI or openSqliteDbFolder is undefined at call time due to a bug)
          console.error('[SettingsView] Error directly calling openSqliteDbFolder API:', error);
          alert('调用打开数据库文件夹功能时出错: ' + error.message);
        }
      } else {
        console.warn('[SettingsView] SQLite database path not available or API openSqliteDbFolder not available.');
        alert('数据库路径无效或无法调用API打开文件夹。');
      }
    },

    // 检查当前数据库路径和选择的新路径是否不同
    isSqlitePathChanged() {
      // 如果没有临时路径，则表示未更改
      if (!this.tempSqlitePath) return false;
      // 如果原路径与新路径相同，也表示未更改
      return this.tempSqlitePath !== this.sqliteDbPath;
    },
    
    // 重置临时SQLite路径
    resetTempSqlitePath() {
      this.tempSqlitePath = null;
      // 移除localStorage中存储的路径
      localStorage.removeItem('lastSqlitePath');
    },

    applySettings() {
      console.log('[SettingsView] Applying settings:', JSON.parse(JSON.stringify(this.localSettings)));
      
      // 在方法开始时重置重启消息，避免显示上一次的提示
      this.restartRequiredMessage = null;
      
      // 检查是否真的更改了SQLite路径
      const sqlitePathChanged = this.isSqlitePathChanged();
      console.log('[SettingsView] SQLite路径是否变更:', sqlitePathChanged, 
                  'tempPath:', this.tempSqlitePath, 'currentPath:', this.sqliteDbPath);
      
      // 如果选择了新的SQLite路径且与当前路径不同
      if (sqlitePathChanged) {
        this.localSettings.sqlitePath = this.tempSqlitePath;
        console.log('[SettingsView] 将SQLite路径同步到localSettings:', this.tempSqlitePath);
        
        // 保存SQLite路径设置
        if (window.electronAPI && window.electronAPI.setSqliteDbPath) {
          window.electronAPI.setSqliteDbPath(this.tempSqlitePath)
            .then(result => {
              if (result && result.success) {
                console.log('[SettingsView] SQLite数据库路径已保存到配置');
                
                // 显示数据库创建状态信息
                const dbCreatedMsg = result.dbCreated 
                  ? '已自动创建新的SQLite数据库文件。' 
                  : '';
                
                // 保存当前设置到本地存储，确保下次启动后能够读取
                localStorage.setItem('lastSqlitePath', this.tempSqlitePath);
                
                // 提示用户需要手动重启应用
                this.restartRequiredMessage = `SQLite数据库路径已更新！${dbCreatedMsg}请手动重启应用程序以应用更改。`;
                // 移除弹窗，但保留重启消息显示
              } else {
                console.error('[SettingsView] 保存SQLite路径失败:', result ? result.error : '未知错误');
                // 路径保存失败时仍然需要提示用户
                this.restartRequiredMessage = `保存SQLite数据库路径失败: ${result ? result.error : '未知错误'}`;
                // 路径保存失败，重置临时路径
                this.resetTempSqlitePath();
              }
            })
            .catch(error => {
              console.error('[SettingsView] 保存SQLite路径出错:', error);
              this.restartRequiredMessage = '保存SQLite数据库路径时出错';
              // 路径保存失败，重置临时路径
              this.resetTempSqlitePath();
            });
        }
      } else {
        // 清除可能存在的临时路径
        if (this.tempSqlitePath) {
          this.resetTempSqlitePath();
        }
      }
      
      // 将设置更新到Vuex
      this.updateSettings(this.localSettings);
      console.log('[SettingsView] 已将设置更新到Vuex:', JSON.parse(JSON.stringify(this.localSettings)));
      
      // 直接从主进程重新加载配置
      if (window.electronAPI && window.electronAPI.invoke) {
        window.electronAPI.invoke('load-app-data')
          .then(data => {
            if (data && data.settings) {
              console.log('[SettingsView] 重新加载配置成功:', JSON.stringify(data.settings));
            } else {
              console.warn('[SettingsView] 重新加载配置返回的数据不完整');
            }
          })
          .catch(error => {
            console.error('[SettingsView] 重新加载配置出错:', error);
            this.restartRequiredMessage = '应用设置后重新加载配置时出错';
          });
      }
    },

    async changeDataPath() {
      if (window.electronAPI && window.electronAPI.selectDataDirectory) {
        try {
          const result = await window.electronAPI.selectDataDirectory();
          if (result && result.error) {
            alert(`选择目录时出错： ${result.error}`);
            return;
          }
          if (result && result.path) {
            const newPath = result.path;
            
            // 直接应用新路径，无需询问确认
            if (window.electronAPI.setCustomDataPath) {
              const setResult = await window.electronAPI.setCustomDataPath(newPath);
              if (setResult && setResult.success) {
                this.restartRequiredMessage = `数据存储位置已更新为 "${newPath}"，应用程序将立即重启。`;
                alert(this.restartRequiredMessage);
                this.sqliteDbPath = newPath + (process.platform === 'win32' ? '\\todolist.db' : '/todolist.db');
                
                // 短暂延迟后重启应用
                setTimeout(() => {
                  if (window.electronAPI && window.electronAPI.restartApp) {
                    window.electronAPI.restartApp({ showMainWindow: true });
                  }
                }, 1000);
                
              } else {
                alert(`设置新的存储位置时出错： ${setResult.error || '未知错误'}`);
              }
            } else {
              alert('用于设置数据路径的API不可用。');
            }
          }
          // 如果路径为null，用户取消，不做任何操作
        } catch (error) {
          console.error('[SettingsView] 更改数据路径时发生错误:', error);
          alert('更改数据路径时发生错误。');
        }
      }
    },

    async changeSqlitePath() {
      if (window.electronAPI && window.electronAPI.selectSqliteDbPath) {
        try {
          const result = await window.electronAPI.selectSqliteDbPath();
          if (result && result.error) {
            alert(`选择目录时出错： ${result.error}`);
            return;
          }
          if (result && result.path) {
            // 检查选择的路径是否与当前路径相同
            if (result.path === this.sqliteDbPath) {
              console.log('[SettingsView] 选择的SQLite路径与当前路径相同，不更新');
              return;
            }
            // 仅更新临时变量，不调用API保存到配置
            this.tempSqlitePath = result.path;
            console.log('[SettingsView] 临时更新SQLite路径:', result.path);
          }
          // 如果路径为null，用户取消，不做任何操作
        } catch (error) {
          console.error('[SettingsView] 选择SQLite数据库路径时发生错误:', error);
          alert('选择SQLite数据库路径时发生错误。');
        }
      }
    },

    // Removed individual @change handlers like onThemeChange, etc.
    // V-model now directly updates localSettings.
  },
  watch: {
    // Watch the Vuex settings. If they change externally (e.g. from another part of app or main process sync),
    // re-initialize localSettings to reflect these external changes IF local settings are not dirty.
    // This is a more complex scenario to handle perfectly to avoid data loss or unexpected resets.
    // For now, we primarily load on created and save on explicit action.
    vuexAppSettings: {
      handler(newVal) {
        console.log('[SettingsView] Vuex appSettings changed externally. Re-initializing local settings.');
        // Simple re-initialization for now. Could be smarter with a dirty check.
        this.initializeLocalSettings();
      },
      deep: true // Watch for nested changes in the settings object
    }
  },
  created() {
    // 直接从主进程获取最新配置
    this.loadConfigFromMainProcess();
    this.fetchStorePath(); // Fetch store path when component is created
    this.fetchSqliteDbPath(); // Fetch SQLite database path when component is created
    console.log('[SettingsView.vue] Created and settings initialized.');

    // Listen for restart required message from main process
    if (window.electronAPI && window.electronAPI.onDataPathChangedRestartRequired) {
      window.electronAPI.onDataPathChangedRestartRequired(() => {
        this.restartRequiredMessage = this.restartRequiredMessage || '数据存储位置已更改。请重新启动应用程序以使更改生效。';
      });
    }

    // 添加SQLite路径变更监听
    if (window.electronAPI && window.electronAPI.onSqlitePathChangedRestartRequired) {
      window.electronAPI.onSqlitePathChangedRestartRequired(() => {
        this.restartRequiredMessage = 'SQLite数据库路径已更改。请重新启动应用程序以应用更改。';
      });
    }
  },
  beforeUnmount() {
    // Clean up the listener
    if (window.electronAPI && window.electronAPI.removeAllListeners) {
        window.electronAPI.removeAllListeners('data-path-changed-restart-required');
    }
  },
  // Optional: beforeRouteLeave navigation guard for unsaved changes
  // beforeRouteLeave(to, from, next) {
  //   if (JSON.stringify(this.localSettings) !== this.initialSettingsSnapshot) {
  //     if (confirm('您有未保存的更改。确定要离开吗？')) {
  //       next();
  //     } else {
  //       next(false);
  //     }
  //   } else {
  //     next();
  //   }
  // }
}
</script>

<style scoped>
/* Base Styles using Semantic CSS Variables */
.settings-view-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-lg);
  background-color: var(--theme-bg-content-area); /* Changed from --d-bg-primary */
  overflow: hidden;
}

.settings-view-content {
  padding: 25px 35px;
  flex-grow: 1;
  overflow-y: auto;
  background-color: var(--theme-bg-primary); /* Changed from --d-bg-primary, could be --theme-bg-content-area if no distinct card needed */
  color: var(--theme-text-primary); /* Changed from --d-text-primary */
  border-radius: var(--border-radius-lg); /* Added for consistency */
  border: var(--border-width) var(--border-style) var(--theme-border-primary); /* Added for consistency */
}

.view-title {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 35px;
  color: var(--theme-text-primary); /* Changed from --d-text-primary */
}

.settings-section {
  margin-bottom: 40px;
  padding-bottom: 25px;
  border-bottom: var(--border-width) var(--border-style) var(--theme-border-primary); /* Changed from --d-border-primary */
}

.settings-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 25px;
  color: var(--theme-text-secondary); /* Changed from --d-text-secondary */
}

.setting-item {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
}

.setting-item.conditional-setting {
  padding-left: 25px;
  margin-top: 20px;
  flex-direction: column;
  align-items: flex-start;
  /* Using a slightly transparent version of the secondary background for subtlety */
  background-color: color-mix(in srgb, var(--theme-bg-secondary) 70%, transparent);
  padding: 15px;
  border-radius: var(--border-radius-base);
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
}

.conditional-setting .setting-label {
  margin-bottom: 15px;
}

.setting-label {
  min-width: 130px;
  margin-right: 20px;
  font-size: 15px;
  color: var(--theme-text-secondary); /* Changed from --d-text-secondary */
}

.setting-label-inline {
  font-size: 15px;
  color: var(--theme-text-secondary); /* Changed from --d-text-secondary */
  margin-left: 10px;
  cursor: pointer;
  line-height: 1.4;
}

/* Controls styling using Semantic Variables */
.setting-select {
  min-width: 220px;
  padding: var(--spacing-sm) var(--spacing-md);
  border: var(--border-width) var(--border-style) var(--theme-border-input);
  background-color: var(--theme-bg-input);
  color: var(--theme-text-input);
  border-radius: var(--border-radius-base);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-duration-short), box-shadow var(--transition-duration-short);
}
.setting-select:focus {
  border-color: var(--theme-accent-primary);
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-primary-rgb), 0.3);
}

.setting-checkbox,
.setting-radio {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  margin-right: 0; /* Keep this or adjust as needed */
  flex-shrink: 0;
  width: 18px; /* Standardized size */
  height: 18px; /* Standardized size */
  border: var(--border-width) var(--border-style) var(--theme-border-input); /* Changed */
  background-color: var(--theme-bg-input); /* Changed */
  color: var(--theme-text-input); /* Changed, though for checkbox/radio, color often means tick/dot */
  transition: border-color var(--transition-duration-short), background-color var(--transition-duration-short), box-shadow var(--transition-duration-short);
}

.setting-checkbox {
  border-radius: var(--border-radius-sm); /* Standardized */
}

.setting-radio {
  border-radius: var(--border-radius-circle);
}

.setting-checkbox:checked,
.setting-radio:checked {
  background-color: var(--theme-accent-primary);
  border-color: transparent;
}

/* Common style for the checkmark/dot */
.setting-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 6px; /* Adjust based on new size */
  top: 3px;  /* Adjust based on new size */
  width: 5px;  /* Adjust based on new size */
  height: 10px; /* Adjust based on new size */
  border: solid var(--theme-text-on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.setting-radio:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; /* Adjust based on new size */
  height: 10px; /* Adjust based on new size */
  border-radius: var(--border-radius-circle);
  background-color: var(--theme-text-on-accent);
}

.setting-checkbox:focus,
.setting-radio:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--theme-accent-primary-rgb), 0.3);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.radio-option {
  display: flex;
  align-items: center;
}

/* Footer actions */
.settings-actions-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-md) var(--spacing-lg); /* Adjusted padding */
  border-top: var(--border-width) var(--border-style) var(--theme-border-primary);
  background-color: var(--theme-bg-secondary); /* Use secondary for footer */
  gap: var(--spacing-md);
}

.btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  transition: all var(--transition-duration-short);
  border: var(--border-width) var(--border-style) transparent; /* Default no border, set below */
  white-space: nowrap;
}

.btn-primary {
  background: var(--theme-accent-gradient);
  color: var(--theme-text-on-accent);
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(var(--theme-accent-primary-rgb), 0.2);
}
.btn-primary:active {
  filter: brightness(0.95);
}

.btn-secondary {
  background-color: var(--theme-bg-button-secondary);
  color: var(--theme-text-secondary);
  border-color: var(--theme-border-secondary);
}
.btn-secondary:hover {
  background-color: var(--theme-bg-hover);
  color: var(--theme-text-primary);
  border-color: var(--theme-border-primary);
}

.path-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.data-path-display-container {
  flex-grow: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--theme-bg-input); /* Use input background for consistency */
  border: var(--border-width) var(--border-style) var(--theme-border-input);
  border-radius: var(--border-radius-base);
  min-height: calc(var(--font-size-base) * var(--line-height-base) + (var(--spacing-sm) * 2) + (var(--border-width) * 2)); /* Match input height */
  display: flex;
  align-items: center;
}

.data-path-text {
  font-size: var(--font-size-sm);
  color: var(--theme-text-input);
  word-break: break-all; /* Allow long paths to wrap */
}
.italic-placeholder {
  font-style: italic;
  color: var(--theme-text-muted);
}

.setting-item.button-item {
  justify-content: flex-start; /* Align button to the left of its allocated space */
  padding-left: calc(130px + 20px); /* Align with other setting content, assuming label width + margin */
}

.btn.btn-info {
  background-color: var(--theme-accent-secondary, var(--l-accent-secondary)); /* Use a secondary accent or a distinct info color */
  color: var(--theme-text-on-accent);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  transition: filter var(--transition-duration-short);
  display: inline-flex; /* For icon alignment */
  align-items: center;
  gap: var(--spacing-xs);
}

.btn.btn-info:hover:not(:disabled) {
  filter: brightness(1.1);
}
.btn.btn-info:disabled {
  background-color: var(--theme-bg-button-secondary); /* Or a specific disabled color */
  color: var(--theme-text-disabled);
  cursor: not-allowed;
}
.button-icon {
  font-family: var(--font-family-icons);
  font-size: var(--font-size-base); /* Adjust as needed */
  line-height: 1;
}

.restart-message {
  color: var(--theme-accent-warning); /* Or a distinct color */
  font-weight: bold;
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  background-color: color-mix(in srgb, var(--theme-accent-warning) 15%, transparent);
  border: 1px solid var(--theme-accent-warning);
  border-radius: var(--border-radius-base);
  text-align: center;
}

.btn-icon {
  background-color: var(--theme-bg-button-secondary);
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
  border-radius: var(--border-radius-base);
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin-left: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-duration-short);
}

.btn-icon .button-icon {
  font-size: 18px;
  color: var(--theme-text-secondary);
}

.btn-icon:hover:not(:disabled) {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-border-primary);
}

.btn-icon:hover:not(:disabled) .button-icon {
  color: var(--theme-text-primary);
}

.btn-icon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.change-path-container {
  padding-left: 150px; /* 对齐其他输入框内容 */
}

.btn-action {
  background-color: var(--theme-bg-button-secondary);
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
  border-radius: var(--border-radius-base);
  margin-left: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-duration-short);
  white-space: nowrap;
}

.btn-action .button-icon {
  font-size: 16px;
  margin-right: var(--spacing-xs);
  color: var(--theme-text-secondary);
}

.btn-action:hover {
  background-color: var(--theme-bg-hover);
  border-color: var(--theme-border-primary);
}

.btn-action:hover .button-icon {
  color: var(--theme-text-primary);
}

.btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.about-section {
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.about-section .section-title {
  margin-bottom: 5px;
}

.about-container {
  padding: 0;
  display: flex;
  justify-content: center;
  margin-top: 0;
}

.app-info {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--theme-text-muted);
  line-height: 1;
}

.contact-info {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--theme-text-muted);
  margin-top: 8px;
}

/* 新增捐赠部分样式 */
.donation-section {
  margin-bottom: 40px;
}

.donation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.donation-text {
  text-align: center;
  margin-bottom: 20px;
  color: var(--theme-text-secondary);
  font-size: 15px;
}

.qrcode-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 20px;
}

.qrcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qrcode-image {
  width: 230px;
  height: 300px;
  border: var(--border-width) var(--border-style) var(--theme-border-primary);
  border-radius: var(--border-radius-base);
  margin-bottom: 10px;
}

.qrcode-label {
  font-size: 14px;
  color: var(--theme-text-secondary);
}

.donation-thanks {
  text-align: center;
  margin-top: 10px;
  color: var(--theme-accent-primary);
  font-size: 15px;
  font-weight: 500;
}

.git-link {
  color: var(--theme-accent-primary);
  text-decoration: none;
}

.git-link:hover {
  text-decoration: underline;
}

</style> 
